<template>
  <div style="margin-top: 10px">
    <el-row>
      <!-- <div>
        <img
          src="@/assets/index.png"
          style="width: 100%; height: 400px; background: lightgray"
        />
      </div> -->
      <el-carousel :interval="5000" arrow="always" type="card">
        <el-carousel-item>
          <img
          src="@/assets/index.png"
          class="carousel-img"
          
        />
          <!-- <img src="@/assets/carousel/6.jpg" class="carousel-img" /> -->
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/10.jpg" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/11.jpg" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/carousel/12.jpg" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <el-row class="app-item-contain">
      <h3 class="index-title-h3" style="border-left: solid 10px #3651d4">
        任务中心
      </h3>
      <el-card class="el-card">
        <div style="padding-left: 15px" v-if="taskList && taskList.length > 0">
          <el-collapse
            v-loading="taskLoading"
            accordion
            v-if="taskList.length !== 0"
          >
            <el-collapse-item
              :title="taskItem.title"
              :name="taskItem.id"
              :key="taskItem.id"
              v-for="taskItem in taskList"
            >
              <table class="index-task-table">
                <tr
                  v-for="paperItem in taskItem.paperItems"
                  :key="paperItem.examPaperId"
                >
                  <td class="index-task-table-paper">
                    {{ paperItem.examPaperName }}
                  </td>
                  <td width="70px">
                    <el-tag
                      :type="statusTagFormatter(paperItem.status)"
                      v-if="paperItem.status !== null"
                      size="mini"
                    >
                      {{ statusTextFormatter(paperItem.status) }}
                    </el-tag>
                  </td>
                  <td width="80px">
                    <router-link
                      target="_self"
                      :to="{
                        path: '/do',
                        query: {
                          id: paperItem.examPaperId,
                          paperType: 6,
                        },
                      }"
                      v-if="paperItem.status === null"
                    >
                      <el-button type="text" size="small">开始答题</el-button>
                    </router-link>
                    <!-- <router-link
                      target="_self"
                      :to="{
                        path: '/edit',
                        query: { id: paperItem.examPaperAnswerId },
                      }"
                      v-else-if="paperItem.status === 1"
                    >
                      <el-button type="text" size="small">批改试卷</el-button>
                    </router-link> -->
                    <router-link
                      target="_self"
                      :to="{
                        path: '/read',
                        query: { id: paperItem.examPaperAnswerId },
                      }"
                      v-else-if="
                        paperItem.status === 2 || paperItem.status === 3
                      "
                    >
                      <el-button type="text" size="small">查看试卷</el-button>
                    </router-link>
                  </td>
                </tr>
              </table>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="no-data-layout-index" v-else>
          <img src="@/assets/emptyIndex.png" />
          <div class="none-data-label">暂无内容</div>
        </div>
      </el-card>
    </el-row>
    <el-row class="app-item-contain">
      <h3 class="index-title-h3">固定试卷</h3>
      <el-card class="el-card" style="display: block" shadow="always">
        <div v-if="fixedPaper && fixedPaper.length > 0">
          <a
            target="_self"
            @click="doPaperClick(item.id)"
            v-for="(item, index) in fixedPaper"
            :key="index"
          >
            <el-card
              class="el-card-item"
              :body-style="{ padding: '0px 0px 10px 0px' }"
              v-loading="loading"
              shadow="hover"
            >
              <el-tooltip placement="top" :content="item.name">
                <div class="index-paper-title">{{ item.name }}</div>
              </el-tooltip>
              <div class="index-paper-item" style="margin-top: 10px">
                学科：{{ subjectFormatter(item.subjectId) }}
              </div>
              <div class="index-paper-item" style="margin-top: 10px">
                试卷类型：{{ paperTypeEnumFormatter(item.paperType) }}
              </div>
              <div class="index-paper-item">
                题目数量：{{ item.questionCount }}
              </div>
              <div class="index-paper-item">试卷总分： {{ item.score }}</div>
              <div class="index-paper-item">
                建议时长：{{ item.suggestTime }} 分钟
              </div>
              <div class="index-paper-item">
                发布时间：{{ item.createTime }}
              </div>
              <div
                class="index-paper-item"
                style="display: flex; align-items: center"
              >
                <span>难度：</span>
                <el-rate
                  :value="item.difficult"
                  disabled
                  style="line-height: 1.3 !important"
                >
                </el-rate>
              </div>
              <!-- <img src="@/assets/exam-paper/show1.png" class="image" />
            <div slot="header" class="clearfix" style="display: flex">
              <span class="span" :title="item.name">{{ item.name }}</span>
              <div style="flex: 1; padding: 0px" class="clearfix">
                <router-link
                  target="_self"
                  :to="{ path: '/do', query: { id: item.id } }"
                >
                  <el-button type="text" class="button">开始做题</el-button>
                </router-link>
              </div>
            </div> -->
            </el-card>
          </a>
        </div>
        <div class="no-data-layout-index" v-else>
          <img src="@/assets/emptyIndex.png" />
          <div class="none-data-label">暂无内容</div>
        </div>
      </el-card>
    </el-row>
    <el-row class="app-item-contain">
      <h3
        class="index-title-h3"
        style="border-left: solid 10px rgb(220, 208, 65)"
      >
        时段试卷
      </h3>
      <el-card class="el-card" style="displat: block">
        <div v-if="timeLimitPaper && timeLimitPaper.length > 0">
          <a
            target="_self"
            @click="doPaperClick(item.id)"
            v-for="(item, index) in timeLimitPaper"
            :key="index"
          >
            <el-card
              class="el-card-item"
              :body-style="{ padding: '0px 0px 10px 0px' }"
              v-loading="loading"
              shadow="hover"
            >
              <el-tooltip placement="top" :content="item.name">
                <div class="index-paper-title">{{ item.name }}</div>
              </el-tooltip>
              <div class="index-paper-item" style="margin-top: 10px">
                学科：{{ subjectFormatter(item.subjectId) }}
              </div>
              <div class="index-paper-item" style="margin-top: 10px">
                试卷类型：{{ paperTypeEnumFormatter(item.paperType) }}
              </div>
              <div class="index-paper-item">
                题目数量：{{ item.questionCount }}
              </div>
              <div class="index-paper-item">试卷总分： {{ item.score }}</div>
              <div class="index-paper-item">
                建议时长：{{ item.suggestTime }} 分钟
              </div>
              <div class="index-paper-item">
                开始时间：{{ item.limitStartTime }}
              </div>
              <div class="index-paper-item">
                结束时间：{{ item.limitEndTime }}
              </div>
              <div
                class="index-paper-item"
                style="display: flex; align-items: center"
              >
                <span>难度：</span>
                <el-rate
                  :value="item.difficult"
                  disabled
                  style="line-height: 1.3 !important"
                >
                </el-rate>
              </div>
              <!-- <img src="@/assets/exam-paper/show2.png" class="image" />
              <div slot="header" class="clearfix" style="display: flex">
                <span class="span" :title="item.name">{{ item.name }}</span>
                <div style="flex: 1; padding: 0px" class="clearfix">
                  <router-link
                    target="_self"
                    :to="{ path: '/do', query: { id: item.id } }"
                  >
                    <el-button type="text" class="button">开始做题</el-button>
                  </router-link>
                </div>
              </div>
              <div style="padding: 0px 20px 4px 14px">
                <p class="index-limit-paper-time">
                  <span>{{ item.startTime }}</span>
                  <br />
                  <span>{{ item.endTime }}</span>
                </p>
              </div> -->
            </el-card>
          </a>
        </div>
        <div class="no-data-layout-index" v-else>
          <img src="@/assets/emptyIndex.png" />
          <div class="none-data-label">暂无内容</div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import indexApi from "@/api/dashboard";
export default {
  data() {
    return {
      fixedPaper: [],
      timeLimitPaper: [],
      pushPaper: [],
      loading: false,
      taskLoading: false,
      taskList: [],
    };
  },
  created() {
    this.initSubject();
    let _this = this;
    this.$nextTick(() => {
      this.loading = true;
      indexApi.index().then((re) => {
        _this.fixedPaper = re.response.fixedPaper;
        _this.timeLimitPaper = re.response.timeLimitPaper;
        _this.pushPaper = re.response.pushPaper;
        _this.loading = false;
      });

      this.taskLoading = true;
      indexApi.task().then((re) => {
        _this.taskList = re.response;
        _this.taskLoading = false;
      });
    });
  },
  methods: {
    doPaperClick(id) {
      this.$confirm("将要开始考试?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",

        type: "warning",
      })
        .then(() => {
          this.$router.push({ path: "/do", query: { id: id } });
        })
        .catch(() => {});
    },
    statusTagFormatter(status) {
      return this.enumFormat(this.statusTag, status);
    },
    statusTextFormatter(status) {
      return this.enumFormat(this.statusEnum, status);
    },
    subjectFormatter(status) {
      return this.subjectEnumFormat(this.subjects, status);
    },
    paperTypeEnumFormatter(status) {
      return this.enumFormat(this.paperTypeEnum, status);
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapGetters("exam", ["subjectEnumFormat"]),
    ...mapState("enumItem", {
      statusEnum: (state) => state.exam.examPaperAnswer.statusEnum,
      statusTag: (state) => state.exam.examPaperAnswer.statusTag,
      paperTypeEnum: (state) => state.exam.examPaper.paperTypeEnum
    }),
    ...mapState("exam", {
      subjects: (state) => state.subjects,
    }),
  },
};
</script>

<style lang="scss" scoped>
.index-title-h3 {
  font-size: 22px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  height: 80%;
  display: block;
  margin: 20px auto 10px auto;
}

.span {
  width: 60%;
  padding-left: 5px;
  white-space: nowrap;
  /* height: 35px; */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-card {
  overflow: visible;
  cursor: default;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 25px;
  padding-left: 15px;
}
/deep/ .el-collapse-item__header {
  font-size: 14px !important;
}
.index-paper-item {
  margin-bottom: 6px;
  font-size: 14px;
  color: #9b9b9b;
}
.index-paper-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-card-item {
  width: 300px;
  height: 240px;
  display: inline-block;
  margin: 0 15px 15px 15px;
  vertical-align: top;
  cursor: pointer !important;
  border: 3px solid rgb(246, 246, 246);
}
.no-data-layout-index {
  width: 100%;
  text-align: center;
  padding-top: 50px;
}
.no-data-layout-index .none-data-label {
  font-size: 14px;
  color: #9b9b9b;
}
</style>
